<template>
  <div class="page">
    <div class="J-vip">
      <div class="J-vip-userinfo line-bottom weui-flex">
          <div class="J-vip-avatar">
            <img :src="userInfo.wxFace || avatar" />
          </div>
          <router-link to="/member" class="weui-flex__item weui-cell__ft">
              <div class="cell"><span class="J-vip-data">{{userInfo.wxNickName | urldec}}</span></div>
              <div class="cell"><span class="J-vip-phone">{{userInfo.telephone}}</span></div>
          </router-link>
      </div>
      <div class="weui-flex J-Tab_t pl">
        <div class="weui-flex__item line-bottom line-top">
          <router-link to="/card" class="name"><span class="_n color-1">{{userInfo.memberCardNum}}</span>会员卡</router-link>
        </div>
        <div class="weui-flex__item pl">
          <router-link to="/coupon" class="name line-left"><span class="_n color-1">{{userInfo.couponsNum}}</span>优惠劵</router-link>
        </div>
      </div>
      <div class="weui-cells">
        <router-link to="/refueling" class="weui-cell weui-cell_access" href="javascript:;">
          <div class="weui-cell__bd">
            <p>加油记录</p>
          </div>
          <div class="weui-cell__ft">已累计为你省 {{userInfo.saveMoney}} 元</div>
        </router-link>
        <!--<router-link to="/account" class="weui-cell weui-cell_access">-->
          <!--<div class="weui-cell__bd">-->
            <!--<p>帐号安全</p>-->
          <!--</div>-->
          <!--<div class="weui-cell__ft">修改绑定手机号码</div>-->
        <!--</router-link>-->
        <!--<router-link to="/help"  class="weui-cell weui-cell_access">-->
          <!--<div class="weui-cell__bd">-->
            <!--<p>帮助中心</p>-->
          <!--</div>-->
          <!--<div class="weui-cell__ft">在线问题答疑</div>-->
        <!--</router-link>-->
      </div>
    </div>
  </div>
</template>
<script>
  const config = require('~src/config')
  const util = require('~src/lib/util')
  import { mapGetters } from 'vuex'
  export default {
    name: 'vip',
    data () {
      return {
        avatar: config._URL_ + '/static/images/avatar.jpeg'
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'getUserInfo'
      })
    },
    //没绑定手机跳转到绑定手机页面
    watch: {
      'userInfo.telephone' (val) {
        if (!val){
          this.$router.push({ path: '/account/edit' })
        }
      }
    },
    mounted () {
      var _this = this
      this.$nextTick(function () {
        if (util.isEmptyObject(_this.userInfo)) {
          _this.$store.dispatch('getUserInfo', {openid: util.localItem.get('openid')})
        }
      })
    },
    methods: {
      junrs () {
//        this.$store.dispatch('TOAST_SHOW', {content: '这是一个错误提示', msg: true})
        this.$store.dispatch('TOAST_SHOW', {autoClose: true, toast: true, loading: true})
      }
    }
  }
</script>
<style lang="scss">
  .J-vip{
    .weui-cell__bd{
      font-size:16px;
    }
    .weui-cell:before{
      left:0
    }
    .weui-cell .weui-cell__ft{
      font-size:14px;
      color:#4ab315;
      padding-right:30px;
    }
    .J-Tab_t{
      background-color:#fff;
      .name{
        display: block;
        padding:8px 0;
        text-align: center;
        color:#333;
        ._n{
          font-size:16px;
          display: block;
        }
      }
    }
  }
  .J-vip-userinfo{
    padding: 14px 20px 14px;
    background-color:#fff;
    position: relative;
    &:after{
      content: " ";
      position: absolute;
      left: 0;
      bottom: -1px;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #d9d9d9;
      color: #d9d9d9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
    .weui-cell__ft{
      position: relative;
      padding-right:20px;
      text-align:left;
    }
    .weui-flex__item{
      padding:5px 0 5px 15px;
    }
    .cell{
      padding-top:5px;
      height:16px;
      line-height:15px;
    }
  }
  .J-vip-card{
    font-size:12px;
    color:#666
  }
  .J-vip-data {
    color:#666;
    font-size:16px;
  }
  .J-vip-phone{
    font-size:12px;
    &:before{
      content: '';
      display: inline-block;
      width:18px;
      height:18px;
      background: url("/static/images/phone.png") no-repeat;
      background-size: 20px 20px;
      background-position: center -2px;
      vertical-align: middle;
    }
  }
  .J-vip-avatar{
    width:60px;
    height:60px;
    -webkit-border-radius:50%;
    border-radius:50%;
    img{
      width:60px;
      height:60px;
      -webkit-border-radius:50%;
      border-radius:50%;
    }
  }
</style>
